import React,{Component} from 'react';
import NewTodoListUI from './newTodoListUi';
import store from './store/index';
import * as funcs from './store/actionCreators';
class NewTodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this.handleChangeInputValue = this.handleChangeInputValue.bind(this);
        this.handleChangeState = this.handleChangeState.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
        store.subscribe(this.handleChangeState);
    }
    render() {
        return(
           <NewTodoListUI
               list = {this.state.list}
               inputValue = {this.state.inputValue}
               handleSubmit = {this.handleSubmit}
               handleDeleteItem = {this.handleDeleteItem}
               handleChangeInputValue = {this.handleChangeInputValue}
           />
        )
    }

    componentDidMount() {
        const action = funcs.getInitData();
        store.dispatch(action);
    }

    handleChangeInputValue(e) {
        const action = funcs.setHandleInputVale(e.target.value);
        store.dispatch(action)
    }

    handleSubmit() {
        const action = funcs.setHandleSubmit();
        store.dispatch(action);
    }

    handleDeleteItem(index) {
        const action = funcs.setHandleDeleteItem(index);
        store.dispatch(action)
    }

    handleChangeState() {
        this.setState(store.getState());
    }
}

export default NewTodoList